<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Git pages</title>
    <link rel="stylesheet" href="/asset/bulma.min-82aac43507618108.css">
    <link rel="stylesheet" href="/asset/fontawesome.min-5e9e696c59c57e83.css">
    <link rel="stylesheet" href="/asset/regular.min-a0c258fb7c5f655d.css">
    <link rel="stylesheet" href="/asset/solid.min-70c2e5caa950974d.css">
    <script type="application/javascript">
        function showErr(err) {
            document.getElementById('errorMessage').innerHTML = err;
            document.getElementById('notification').style.display = 'block';
        }
        function perform_get(t, url) {
            const clazzName = t.className;
            t.disabled = true;
            t.className = clazzName + ' is-loading';
            fetch(url).then(response => response.json())
                .then(data => {
                    t.className = clazzName;
                    t.disabled = false;
                    console.log(data);
                    if (data.status === 0) {
                        if (url.indexOf('push') > -1) {
                            let d = document.createElement('div');
                            d.innerHTML = 'Push successfully';
                            t.parentNode.appendChild(d);
                        } else
                        location.href = 'git-pages';
                    } else {
                        showErr(data.error.detail);
                    }
                })
                .catch(err => {
                    console.log(err);
                    showErr(err);
                });
        }
        function setBranch(t) {
            const branch = document.getElementById('branches').value;
            if (branch) {
                perform_get(t, '/git/branch/set/' + encodeURIComponent(branch));
            }
        }
        function push(t) {
            const pwd = document.getElementById('git-password').value;
            if (!pwd) {
                showErr('Git password is needed.');
                return;
            }
            perform_get(t, '/git/push/' + encodeURIComponent(pwd));
        }
        function showNotification() {
            const h = '<p>Please confirm this deletion</p>' +
                '<div><button class="button" onclick="remove(this);">删除/Remove</button>' +
                '<button class="button" onclick="this.parentNode.parentNode.parentNode.style.display=\'none\'">取消/Cancel</button></div>';
            showErr(h);
        }
        function remove(t) {
            perform_get(t, '/git/remove');
        }
        document.addEventListener('DOMContentLoaded', () => {
            (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
                const $notification = $delete.parentNode;

                $delete.addEventListener('click', () => {
                    $notification.style.display = 'none';
                });
            });
        });
    </script>
</head>
<body>
<div class="container">
    <h1 class="title">
        Git pages settings
    </h1>
    <p>&nbsp;</p>
    <table class="table">
        <tr>
            <td>仓库地址/Git repository URL</td>
            <td>{{remote_url}}</td>
        </tr>
        <tr>
            <td>邮箱/Email</td>
            <td>{{email}}</td>
        </tr>
        <tr>
            <td>用户名/UserName</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>分支/Branch</td>
            <td>
                {% if branches|length > 1 %}
                <select id="branches">
                    <option>请选择分支/Please choose a branch</option>
                    {% for branch in branches %}
                    <option value="{{ branch }}">{{ branch }}</option>
                    {% endfor %}
                </select>
                {% else %}
                {{branch}}
                {% endif %}
            </td>
        </tr>
    </table>
    <div>
        {% if branches|length > 1 %}
        <button class="button is-medium" onclick="setBranch(this);">确认分支/Confirm branch</button>
        {% else %}
        <div class="field has-addons">
            <div class="control">
                <input class="input is-medium" id="git-password" type="password" placeholder="Git password">
            </div>
            <div class="control">
                <button class="button is-medium" onclick="push(this);">同步/Push</button>
            </div>
            <div class="control">
                <button class="button is-medium" onclick="location.href='/management';">返回/Back</button>
            </div>
            <div class="control">
                <button class="button is-medium" onclick="showNotification();">删除/Remove</button>
            </div>
        </div>
        <p class="help">Git password for {{name}}. This tool <b>don't record any credentials</b>.</p>
        {% endif %}
    </div>
    <div id="notification" class="notification is-danger is-light" style="display:none;width:435px">
        <button class="delete"></button>
        <span id="errorMessage"></span>
    </div>
</div>
</body>
</html>